<template>
  <div id="app">
    <!-- 头部 -->
     <mt-header fixed title="vueCMS"></mt-header> 
        <div class="back" v-show="isShow">
            <a @click="goback">返回</a>
        </div>
     
    <router-view></router-view>
    
    <!-- 底部 -->
    
    <nav class="mui-bar mui-bar-tab">
       <!-- mui-active -->
      <router-link class="mui-tab-item" to="/Home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/member">
        <span class="mui-icon mui-icon-email">
          
        </span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-contact">
            <span class="mui-badge" ref="getcount">0</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>


  </div>
</template>


<script>

      import {vueobj,KEY} from './kits/commonvue.js'
      import {getItemCount} from './kits/localStorageHelper.js'
      vueobj.$on(KEY,function(count){
         var muiBadge = document.querySelector('.mui-badge');
         // console.log(muiBadge);
          //首先通过当前获得当前的Input里面的值，那么通过点击子组件中的值之后，传值过来这里，拿到数量，追加到当前的dom中显示出来
         var sum =  (muiBadge.innerText-0);
         sum+=count;
         
         muiBadge.innerText=sum;
        
      })

      export default {
        mounted(){
          //因为当前一刷新之后，数据就会消失，那么通过重新获得缓存中的总数，再显示出来，因为需要等dom元素加载完毕之后再显示出来，所以就需要渲染完在数据之后再加载出来
          this.count = getItemCount();
          this.$refs.getcount.innerText = this.count;
        },
        name: 'app',
        data(){
            return {
              count:0,
              isShow:false  //是否显示
            }
        },
        methods:{
            //返回上一页
            goback:function(){
                this.$router.go(-1);
            },
            getCount(){

            }
        },
        //监控路由的变化
        watch:{
            '$route':function(newVal,oldVal){
                console.log(newVal.path.toLowerCase())
                //通过监控当前的路径的变化来改变返回按钮的显示与隐藏
                if(newVal.path.toLowerCase() == '/home'){                  
                       this.isShow = false
                }else{                  
                      this.isShow = true
                }
            }
        }
      }
</script>


<style scoped>  
/*返回按钮*/
.back{
    position: fixed;
    top:10px;
    left:10px;
    z-index: 50;
}
.back a{
    display: block;
    width: 40;
    height: 40px;
    font-size: 16px;
    color: #fff;
    font-weight:bold;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
